<template>
	<view>
		<Sheader :title="'我的资料'" :background="'#fff'" :color="'#203136'" :showBack='true'/>
		<view class="content">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="210" label="身份证号" :required="true">
					<u-input v-model="form.idNo" :disabled="true" type="number" />
				</u-form-item>
				<u-form-item label-width="210" label="手机号码" :required="true">
					<u-icon slot="right" size="40" name="edit-pen-fill"@click="openEdit('telephone', form.telephone, '请输入手机号码', '手机号码', 'text', 1 ,true)"></u-icon>
					<u-input v-model="form.telephone" :disabled="true" type="number" placeholder="请输入手机号码" />
				</u-form-item>
			</u-form>
		</view>
		<EditComponent :editOption="editOption" :editValue="editValue" :editKey="editKey" @closeEdit="closeEdit" v-if="showEdit"/>
	</view>
</template>

<script>
	import Sheader from '@/components/Sheader/index.vue'
	import EditComponent from '@/components/EditComponent/index.vue'
	export default {
		data() {
			return {
				showEdit: false,
				editValue: '',
				editKey: '',
				editOption: {
					editType: 'text',
					placeholder: '',
					label: '',
					required: true,
					lists: [],
					index: 1
				},
				form: {},
			}
		},
		components: {
			Sheader,
			EditComponent
		},
		async onLoad() {
			this.form = JSON.parse(window.localStorage.fw_userInfo).data
			this.form.genderN = this.form.gender == 1 ? '男' : '女'
			console.log(this.form, 'form')
		},
		onUnload() {
		},
		methods: {
			openEdit(key, value, placeholder, label, type, index, required) {
				this.editKey = key
				this.editValue = value
				this.editOption.id = this.form.id
				this.editOption.placeholder = placeholder
				this.editOption.label = label
				this.editOption.type = type
				this.editOption.index = index
				this.editOption.required = required
				let lists = []
				let res = {}
				if (label == '性别') {
					lists =  [
					{
						text: '男'
					},
					{
						text: '女'
					}]
				}
				this.editOption.lists = lists
				this.showEdit = true
			},
			closeEdit(form) {
				this.showEdit = false
				if (form) {
					this.form = Object.assign(this.form, form)
					this.form.genderN = this.form.gender == 1 ? '男' : '女'
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background: #fff;
		padding-top: 90rpx;
		height: 100vh;
	}
	/deep/ .uicon-edit-pen-fill {
		color: #2979FF
	}
	/deep/ .uni-input-input {
		color: #2979FF
	}
</style>
